<template>
    <div>
        <h1>私有变量</h1>

        <div>
            由于父子组件传值过于繁琐和不便，出现了此工具，处理常见的父子组件传值以及父子子子...组件传值，私有定时器和私有事件管理器
        </div>
        <div style="color: red">下列示例代码均在 script setup 单文件组件中写入</div>
        <h3>setConf-在父组件创建一个父组件变量</h3>
        <div>在created或者mounted方法中调用</div>
        <dCode :code="conf.str1" />
        <h3>getConf-在子组件获取一个父组件变量</h3>
        <div>在created或者mounted方法中调用</div>
        <dCode :code="conf.str2" />
        <h3>Timer-获取一个私有定时器</h3>
        <div>
            在页面销毁后自动清理所有定时器，具体API
            <span class="cur" style="color: red" @click="System.push('/tools-javascript/Timer')">Timer定时器</span>
        </div>
        <dCode :code="conf.str3" />
        <h3>Event-获取一个私有事件管理器</h3>
        <div>
            在页面销毁后自动清理所有事件管理器，具体API
            <span class="cur" style="color: red" @click="System.push('/tools-javascript/CEvent')">
                CEvent事件管理器
            </span>
        </div>
        <div>使用CEvent.emit('test',666)可以触发私有对象注册事件</div>
        <dCode :code="conf.str4" />
        <h3>应用项目</h3>
        <div>应用：<a href="https://gitee.com/veigarchen/uniapp-vue3-fast" target="_blank">vue3+ts+vite+uniapp项目脚手架</a></div>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import System from '~/utils/System'
const conf = reactive({
    str1: `const conf = reactive({
    test:1
})
Scope.setConf(conf)`,
    str2: `const mconf = Scope.getConf()
console.log(mconf)
`,
    str3: `const timer = Scope.Timer()
this.timer.on(()=>{console.log('每三秒执行')},3000)
`,
    str4: `const event = Scope.Event()
this.event.on('test',(data)=>{console.log(data)})
`
})
</script>
<style lang="less" scoped></style>
